view,
navigator {
    box-sizing: border-box;
}

.page_index_bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    .bg {
        width: 100vw;
        height: 100vh;
    }
}

.index {
    // background-color: #fdf9e6;

    .banner {
        width: 100%;
        height: 1024rpx;

        swiper {
            height: 1024rpx;

            swiper-item {
                height: 1024rpx;

                image {
                    width: 100%;
                    height: 1024rpx;
                }
            }
        }
    }

    .vip_to_box {
        margin-top: 50rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;

        .pic {
            width: 335rpx;
            height: 134rpx;

            image {
                width: 335rpx;
                height: 134rpx;
            }
        }
    }

    .funJump {
        margin-top: 48rpx;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;

        .funJump_item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .image {
                width: 140rpx;
                height: 95rpx;
            }

            .text {
                font-family:
                    PingFang SC,
                    PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;
                line-height: 28rpx;
                font-weight: 400;
                margin-top: -42rpx;
            }
        }
    }

    .categoryTitle {
        width: 750rpx;
        height: 200rpx;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 40rpx;

        .E_title {
            margin-top: 36rpx;
            background: linear-gradient(81deg, #945d25 0%, #f1e8ad 51%, #aa8e5a 100%);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            padding: 4rpx 14rpx;
            font-family:
                Alibaba PuHuiTi 2,
                Alibaba PuHuiTi 20;
            font-weight: 500;
            font-size: 15rpx;
            color: #4e3422;
            display: inline;
        }

        .E_titles {
            background: #945d25;
            color: #ffffff;
        }

        .title {
            margin: 20rpx 0 16rpx;
            font-family:
                Alibaba PuHuiTi 2,
                Alibaba PuHuiTi 20;
            font-weight: 700;
            font-size: 48rpx;
            color: #333333;
            line-height: 44rpx;
            letter-spacing: 8px;
        }

        .sub {
            font-family:
                Alibaba PuHuiTi 2,
                Alibaba PuHuiTi 20;
            font-weight: 400;
            font-size: 20rpx;
            color: #333333;
            line-height: 24rpx;
        }
    }

    .titleBj {
        background-image: url("https://lhs.tann.cc/upload/images/hotBj.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .newProduct2 {
        width: 100%;
        padding: 0 30rpx;
        margin-top: 70rpx;

        .top_title {
            width: 100%;
            height: 104rpx;

            image {
                width: 100%;
                height: 104rpx;
            }
        }

        .content {
            .item {
                width: 100%;
                background: #fcfaee;
                box-shadow:
                    0rpx 0rpx 20rpx 0rpx rgba(185, 98, 33, 0.2),
                    inset 2rpx 2rpx 4rpx 4rpx #ffffff;
                border-radius: 20rpx;
                display: flex;
                justify-content: space-between;
                padding: 30rpx;
                margin-top: 50rpx;

                .left_pic {
                    width: 300rpx;
                    height: 300rpx;

                    image {
                        width: 300rpx;
                        height: 300rpx;
                        box-shadow:
                            0rpx 0rpx 20rpx 0rpx rgba(185, 98, 33, 0.2),
                            inset 1rpx 1rpx 4rpx 2rpx #ffffff;
                        border-radius: 20rpx;
                    }
                }

                .right_info {
                    width: calc(100% - 320rpx);
                    padding: 20rpx 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .title_box {
                        height: 150rpx;

                        .title {
                            font-weight: 500;
                            font-size: 32rpx;
                            line-height: 1.4;
                            color: #333333;
                            overflow: hidden;
                            display: -webkit-box;
                            /* 旧版 Flexbox，必须 */
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            /* 控制行数 */
                            text-overflow: ellipsis;
                            /* 末尾省略号 */
                        }

                        .spec {
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #333333;
                        }
                    }

                    .bot_box {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;

                        .l {
                            .o_price {
                                font-weight: 500;
                                font-size: 40rpx;
                                color: #333333;

                                text {
                                    font-weight: 400;
                                    font-size: 24rpx;
                                    color: #333333;
                                }
                            }

                            .n_price {
                                padding: 0 10rpx 0 20rpx;
                                height: 42rpx;
                                line-height: 42rpx;
                                background: #f9800f;
                                box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(185, 98, 33, 0.2);
                                border-radius: 30rpx 4rpx 4rpx 4rpx;
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #fcfaee;
                                margin-top: 6rpx;
                                display: flex;
                                align-items: center;

                                text {
                                    margin-left: 20rpx;
                                    position: relative;

                                    &::after {
                                        content: "";
                                        display: block;
                                        width: 2rpx;
                                        height: 20rpx;
                                        background-color: #fcfaee;
                                        position: absolute;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        left: -10rpx;
                                    }
                                }
                            }
                        }

                        .cart_icon {
                            width: 80rpx;
                            height: 80rpx;

                            image {
                                width: 80rpx;
                                height: 80rpx;
                                border-radius: 50%;
                                box-shadow:
                                    0rpx 0rpx 10rpx 0rpx rgba(185, 98, 33, 0.5),
                                    inset 1rpx 1rpx 4rpx 0rpx rgba(255, 255, 255, 0.5);
                            }
                        }
                    }
                }
            }
        }
    }

    .hot2 {
        width: 100%;
        padding: 0 30rpx;
        margin-top: 50rpx;

        .top_title {
            width: 100%;
            height: 104rpx;

            image {
                width: 100%;
                height: 104rpx;
            }
        }

        .hotList {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 30rpx;

            .goods_list_one {
                align-items: stretch;
                width: 335rpx;
                background: #fcfaee;
                box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(185, 98, 33, 0.2);
                border-radius: 20rpx;
                margin-top: 20rpx;
            }

            .listItem {
                width: 335rpx;

                .imgframe {
                    position: relative;
                    width: 335rpx;
                    height: 335rpx;
                    overflow: hidden;
                    border-radius: 20rpx 20rpx 0 0;

                    .image {
                        width: 344rpx;
                        height: 344rpx;
                    }
                }

                .info {
                    padding: 0 16rpx;
                    box-sizing: border-box;
                    padding-bottom: 20rpx;

                    .title {
                        font-family:
                            Alibaba PuHuiTi 2,
                            Alibaba PuHuiTi 20;
                        font-weight: 500;
                        font-size: 24rpx;
                        color: #333333;
                        line-height: 36rpx;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        height: 72rpx;
                        margin-top: 16rpx;
                    }

                    .yuanjia {

                        .icon {
                            font-weight: 500;
                            font-size: 24rpx;
                            color: #333333;
                        }

                        font-family: Alibaba PuHuiTi 2,
                        Alibaba PuHuiTi 20;
                        font-weight: 500;
                        font-size: 24rpx;
                        color: #333333;
                        margin: 8rpx 0;
                        display: flex;
                        align-items: baseline;

                        .num {
                            font-weight: 500;
                            font-size: 36rpx;
                            color: #333333;
                        }

                        .ordinary_price {
                            margin-left: 10rpx;
                            font-weight: 400;
                            color: #999999;

                            .icon {
                                font-size: 22rpx;
                            }

                            .num {
                                font-size: 24rpx;
                                text-decoration: line-through;
                            }
                        }
                    }

                    .vip_price_box {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .n_price {
                            padding: 0 10rpx 0 20rpx;
                            height: 42rpx;
                            line-height: 42rpx;
                            background: #f9800f;
                            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(185, 98, 33, 0.2);
                            border-radius: 30rpx 4rpx 4rpx 4rpx;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #fcfaee;
                            margin-top: 6rpx;
                            display: flex;

                            text {
                                margin-left: 20rpx;
                                position: relative;

                                &::after {
                                    content: "";
                                    display: block;
                                    width: 2rpx;
                                    height: 20rpx;
                                    background-color: #fcfaee;
                                    position: absolute;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    left: -10rpx;
                                }
                            }
                        }

                        .cart_icon {
                            width: 50rpx;
                            height: 50rpx;

                            image {
                                width: 50rpx;
                                height: 50rpx;
                                border-radius: 50%;
                            }
                        }
                    }
                }
            }
        }
    }

    .video2 {
        width: 100%;
        padding: 0 30rpx;
        margin-top: 50rpx;

        .content {
            width: 690rpx;
            height: 464rpx;
            background: linear-gradient(180deg, #facc76 0%, #f9800f 100%);
            box-shadow:
                0rpx 0rpx 20rpx 0rpx rgba(185, 98, 33, 0.2),
                inset 0rpx 10rpx 10rpx 0rpx rgba(255, 255, 255, 0.5);
            border-radius: 20rpx 100rpx 20rpx 20rpx;
            padding: 30rpx;

            .icon_box {
                display: flex;
                align-items: center;

                .icon1 {
                    width: 52rpx;
                    height: 36rpx;
                    margin-right: 10rpx;
                }

                .icon2 {
                    width: 453rpx;
                    height: 36rpx;
                }
            }

            .introduce_video {
                width: 100%;
                height: 348rpx;
                margin-top: 20rpx;
            }
        }
    }

    .video_cover {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .video_play_icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        z-index: 5;
    }

    .video_bg_black {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.4);
    }

    .video_cover_txt {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text-align: right;
        color: #fff;
        font-size: 28rpx;
        margin-top: 35rpx;
        height: 90rpx;
    }

    .video_icon_lock {
        width: 30rpx;
        height: auto;
        margin: 0 30rpx;
    }

    .video_txt {
        margin: 10rpx auto;
    }

    .aboutUs {
        margin-top: 50rpx;
        padding: 30rpx;

        .info {
            padding-bottom: 60rpx;
            box-sizing: border-box;
            background: #fcfaee;
            box-shadow:
                0rpx 0rpx 20rpx 0rpx rgba(185, 98, 33, 0.2),
                inset 0rpx 10rpx 20rpx 0rpx rgba(245, 145, 72, 0.3);
            border-radius: 20rpx;
            padding: 250rpx 30rpx 30rpx;
            position: relative;

            .brand_bg {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: -50rpx;

                image {
                    width: 687rpx;
                    height: 268rpx;
                }
            }

            .info1 {
                box-sizing: border-box;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
            }

            .title {
                // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                font-family: YouSheBiaoTiHei;
                font-size: 36rpx;
                color: #333333;
                text-align: left;
                font-weight: 700;
                font-style: italic;
                position: relative;
                padding-left: 26rpx;
                margin-bottom: 10rpx;

                &::after {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    content: "";
                    display: block;
                    width: 10rpx;
                    height: 36rpx;
                    background: #f9800f;
                }
            }

            .introduce {
                .about_us {
                    word-break: break-all;
                    text-align: justify;
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 70rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .hpmEatlas {
                    width: 264rpx;
                    height: 340rpx;
                    float: right;
                    margin-left: 30rpx;
                }
            }

            ._line {
                width: 632rpx;
                height: 4rpx;
                background-image: linear-gradient(to right, #f9800f 50%, transparent 50%);
                /* 控制虚线长度和间隔 */
                background-size: 14px 1px;
                margin: 50rpx 0;
            }

            .homeTraceabilityBox {
                text-align: center;

                .title {
                    font-family: YouSheBiaoTiHei;
                    font-size: 36rpx;
                    color: #333333;
                    text-align: left;
                    font-weight: 700;
                    font-style: italic;

                    view {
                        width: 0rpx;
                        height: 24rpx;
                        border-left: 6rpx solid;
                        border-image: #312c2f;
                        margin-right: 15rpx;
                    }
                }

                .homeTraceabilityIcon {
                    width: 630rpx;
                    height: 280rpx;
                    margin-top: 30rpx;
                }

                .homeTraceabilityIcon2 {
                    width: 630rpx;
                    height: 126rpx;
                    margin-top: 30rpx;
                }
            }
        }
    }

    .counselor {
        margin: 50rpx 0;
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;
        box-sizing: border-box;
        align-items: center;

        .counselor_left {
            display: flex;
            flex-direction: column;

            .image {
                width: 163rpx;
                height: 60rpx;
            }

            .text {
                font-family:
                    PingFangSC,
                    PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
                line-height: 36rpx;
                margin-top: 20rpx;
            }
        }

        .counselor_right {
            width: 200rpx;
            height: 200rpx;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(185, 98, 33, 0.2);
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .image {
                width: 180rpx;
                height: 180rpx;
            }
        }
    }

    .btm {
        .image {
            width: 750rpx;
            height: 440rpx;
        }
    }

    .technology {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 80rpx;
        padding-bottom: 80rpx;

        .image {
            width: 124rpx;
            height: 52rpx;
        }

        .text {
            font-family:
                PingFang SC,
                PingFang SC;
            font-weight: normal;
            font-size: 16rpx;
            color: #999999;
            line-height: 28rpx;
            margin-top: 6rpx;
        }
    }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 572rpx;
    height: 715rpx;
    background-color: #fff;
    border-radius: 36rpx;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .btn {
        position: absolute;
        left: 76rpx;
        bottom: 59rpx;
        width: 420rpx;
        height: 72rpx;
        text-align: center;
        background-color: #312c2f;
        color: #ffffff;
        text-align: center;
        line-height: 74rpx;
        border-radius: 80rpx;
    }

    .image {
        position: absolute;
        right: 32rpx;
        top: 32rpx;
        width: 30rpx;
        height: 30rpx;
    }
}

.memberDay {
    width: 750rpx;
    height: 969rpx;
    margin-top: 50rpx;
    position: relative;

    .memberDayImg {
        width: 100%;
        height: 100%;
    }

    .memberDayClose {
        position: absolute;
        top: 921rpx;
        left: 353rpx;
        width: 44rpx;
        height: 44rpx;
    }

    .memberDaySure {
        position: absolute;
        width: 336rpx;
        height: 95rpx;
        top: 758rpx;
        left: 206rpx;
    }
}

.vip_ad {
    padding: 0 30rpx;
    width: 100%;
    height: 240rpx;

    margin-top: 50rpx;

    image {
        width: 100%;
        height: 100%;
        box-shadow:
            0rpx 0rpx 20rpx 0rpx rgba(185, 98, 33, 0.2),
            inset 0rpx 0rpx 20rpx 10rpx rgba(223, 42, 19, 0.1);
    }
}

.official_account {
    position: fixed;
    top: 10rpx;
    right: 15rpx;
    padding: 5rpx 25rpx;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 24rpx;
    border-radius: 20rpx;
}